<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>

    <title>Jobs</title>
</head>
<body class="container-fluid">
<div class="col-lg-6 mx-auto">

    <section class="row row-cols-1 mt-lg-5">
        <nav class="nav nav-tabs">
            <a class="nav-item nav-link active bg-light" href="#">Home</a>
            <a class="nav-item nav-link" th:href="@{/add}">Add</a>
        </nav>
    </section>

    <section class="row row-cols-2 border border-top-0 bg-light">
        <h5 class="col-10 offset-1 border-bottom mb-3 mt-lg-3 text-muted">Personal Information</h5>

        <div class="col">
            <img class="img-thumbnail" th:src="@{/{image}(image=${applicant.getImage()})}" alt="Photo">
        </div>

        <div class="col">

            <div class="row input-group mb-1 border-bottom">
                <label for="show-name" class="col-4 col-form-label border-right">Name</label>
                <div class="col-8">
                    <input type="text" class="form-control-plaintext" id="show-name" th:value="${applicant.getName()}"
                           readonly>
                </div>
            </div>

            <div class="row input-group mb-1 border-bottom">
                <label for="show-age" class="col-4 col-form-label border-right">Age</label>
                <div class="col-8">
                    <input type="text" class="form-control-plaintext" id="show-age" th:value="${applicant.getAge()}"
                           readonly>
                </div>
            </div>

            <div class="row input-group mb-1 border-bottom">
                <label for="show-profession" class="col-4 col-form-label border-right">Profession</label>
                <div class="col-8">
                    <input type="text" class="form-control-plaintext" id="show-profession"
                           th:value="${applicant.getProfessionName()}" readonly>
                </div>
            </div>

            <div class="row input-group mb-1 border-bottom">
                <label for="show-experience" class="col-4 col-form-label border-right">Experience</label>
                <div class="col-8">
                    <input type="text" class="form-control-plaintext" id="show-experience"
                           th:value="${applicant.getExperienceYears()}" readonly>
                </div>
            </div>

            <div class="row input-group mb-1 border-bottom">
                <label for="show-telephone" class="col-4 col-form-label border-right">Telephone</label>
                <div class="col-8">
                    <input type="text" class="form-control-plaintext" id="show-telephone"
                           th:value="${applicant.getTelephone()}" readonly>
                </div>
            </div>

        </div>

    </section>

</div>
</body>
</html>